import 'dart:convert';
import 'package:flutter/material.dart';
import '../services/ScreenAdatper.dart';
import '../services/Storage.dart';
import '../widget/SlideButtonWidget.dart';
// import 'package:left_scroll_actions/left_scroll_actions.dart';
class SearchPage extends StatefulWidget {
  SearchPage({Key key}) : super(key: key);

  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {

  Widget _titleWidget(value){
    return Container( 
      padding: EdgeInsets.all( ScreenAdatper.width(20)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(value,
            style: TextStyle(
              color: Colors.black54,
              fontSize: ScreenAdatper.width(30)
            ),
          ),
          SizedBox(height: 10,),
          Divider(
            height: 1,
          )
        ],
      ),
    );
  }
  List _hotist = ['带我去交','第五期','GRE','天桥区','www','带我去多无群','的地位群','ffq','1','关刚刚'];
  List _historyList = [];
  _hotListWidget(){
    return Wrap( 
        children:this._hotist.map((value){
          return InkWell(
            child: Container(
                padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color:Colors.black12,
                  borderRadius: BorderRadius.circular(5)
                ),
                child: Text(value),
              ),
            );
        }).toList()
    );
  }
  
  

  List<SlideButton> slideList;
  _getSlides(index) {
    var key = GlobalKey<SlideButtonState>();
    var slide = SlideButton(
      key: key,
      child: Container(
        color: Colors.white,
        child: ListTile(
          title: Text(this._historyList[index]),
        ),
      ),
      onSlideStarted: (){ 
        slideList.forEach((slide){
          if(slide.key != key){
            slide.key.currentState?.close();
          }
        });
      },
      buttons: <Widget>[
        SlideItem(text:"删除",color: Colors.red,  onTap:() {
          setState(() {
            this._historyList.removeAt(index);
            Storage.setString('searchHistory',json.encode(this._historyList));
          });
          key.currentState.close();
        }),
      ]
    );
    slideList.add(slide);
    return slide;
  }
  _historyListWidget(){
     slideList = List<SlideButton>();
     return Container(
        height: ScreenAdatper.height(720),
        padding: EdgeInsets.all( ScreenAdatper.width(20)),
        child: ListView.builder(
            itemCount: this._historyList.length,
            itemBuilder: (context,index) { 
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _getSlides(index),
                  Divider(height: 1,)
                ],
              );
            }
          )
     );
  } 
  @override
  void initState() {
    super.initState();
    _getHistory();
  }
  _getHistory() async{
     var historyData  = await Storage.getString('searchHistory');
     if(historyData != null){
        setState(() {
         this._historyList  = json.decode(historyData);
       });
     }
  } 
  @override
  Widget build(BuildContext context) {
    var _keywords;
    return Scaffold(
      appBar:AppBar(
        title: Container(
          height:ScreenAdatper.height(68),
          decoration: BoxDecoration(
            color: Color.fromRGBO(233, 233, 233, 0.8),
            borderRadius: BorderRadius.circular(30)
          ),
          child: Container(
            child: TextField(
              autofocus: true,
              decoration: InputDecoration(
                hintText: "请输入搜索内容",
                contentPadding: EdgeInsets.only(top: ScreenAdatper.height(48),left: ScreenAdatper.width(30),right: ScreenAdatper.width(30)),
                border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                  borderRadius: BorderRadius.circular(30)
                )
              ),
              onChanged:(value){      //监听
                _keywords = value;
              },
            )
          ),
        ),
        actions: <Widget>[
          InkWell(
            child: Container(
              alignment: Alignment.center,
              height:ScreenAdatper.height(68),
              width: ScreenAdatper.width(120),
              child: Text("搜索"),
            ),
            onTap: () {
              setState((){
               var hasData = this._historyList.any((v){
                 return v == _keywords;
               });
               if(!hasData){
                 this._historyList.add(_keywords);
                 Storage.setString('searchHistory',json.encode(this._historyList));
               }   
              });
              Navigator.pushReplacementNamed(context, '/productList',arguments: {
                "keywords":_keywords
              });
            },
          )    
        ],
      ) ,
      body:Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _titleWidget('热搜'),
          _hotListWidget(),
          _titleWidget('历史记录'),
          _historyListWidget(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: ScreenAdatper.width(600),
                height: ScreenAdatper.height(60),
                child: OutlineButton(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.delete_outline,color: Colors.black45,size:ScreenAdatper.width(32) ,),
                      Text("清空历史搜索",style: TextStyle(color: Colors.black45),)
                    ],
                  ),
                  onPressed: (){
                    setState(() {
                      this._historyList = [];
                    });
                    Storage.remove('searchHistory');
                  }
                ),
              ),
            ],
           
            )
        ],
      ),
    );
  }
}
  